Firebase Cloud Messaging দিয়ে Push Notification সেটআপ করা

Firebase Cloud Messaging (FCM) একটি শক্তিশালী টুল যা মোবাইল অ্যাপ্লিকেশনগুলোতে Push Notification পাঠানোর জন্য ব্যবহৃত হয়। Ionic অ্যাপে FCM ব্যবহার করে Push Notification পাঠানোর জন্য আপনাকে কিছু স্টেপ অনুসরণ করতে হবে। এখানে আমরা Ionic অ্যাপে FCM সেটআপ করার ধাপগুলো দেখব।

১. Firebase প্রজেক্ট তৈরি করা

প্রথমে আপনাকে Firebase Console এ একটি প্রজেক্ট তৈরি করতে হবে:

1. Firebase Console এ যান: Firebase Console
2. নতুন প্রজেক্ট তৈরি করুন: "Add project" ক্লিক করে একটি নতুন প্রজেক্ট তৈরি করুন এবং প্রজেক্টের নাম, দেশ ইত্যাদি তথ্য দিন।
3. Firebase Cloud Messaging সক্রিয় করুন: প্রজেক্ট তৈরি হওয়ার পর, Cloud Messaging ট্যাবে গিয়ে FCM সক্রিয় করুন।

২. Ionic অ্যাপে Firebase সেটআপ করা

Firebase ব্যবহার করার জন্য আপনাকে Ionic অ্যাপে Firebase SDK এবং অন্যান্য প্রয়োজনীয় প্লাগইন ইনস্টল করতে হবে।

২.১ Ionic প্লাগইন ইনস্টল করা

Firebase ব্যবহার করার জন্য প্রথমে কিছু Ionic প্লাগইন ইনস্টল করতে হবে:

ionic install @ionic-native/firebase
ionic install @capacitor/push-notifications
ionic build
npx cap sync

এছাড়া, Firebase Cloud Messaging এর জন্য Firebase JavaScript SDK এর ক্লায়েন্ট লাইব্রেরি ব্যবহার করতে হবে। এটি ইনস্টল করতে:

npm install firebase @angular/fire

৩. Firebase প্রজেক্ট কনফিগারেশন এবং অ্যাপের সাথে সংযোগ

Firebase প্রজেক্টের Config Object আপনাকে Firebase Console থেকে নিতে হবে। এটি Firebase Settings থেকে পাওয়া যাবে:

1. Firebase Console এ গিয়ে Project Settings > General > Your apps এ যান।
2. Web অ্যাপের জন্য কনফিগারেশন কোড পাবেন। এটি কপি করুন এবং আপনার Ionic অ্যাপে ব্যবহার করুন।

৩.১ Firebase কনফিগারেশন কোড যোগ করা

src/environments/environment.ts ফাইলে Firebase কনফিগারেশন কোড যুক্ত করুন:

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID",
    measurementId: "YOUR_MEASUREMENT_ID"
  }
};

এটি Firebase SDK এর মাধ্যমে আপনার অ্যাপকে Firebase এর সাথে সংযোগ করবে।

৩.২ Firebase Initial Setup

এখন, Firebase SDK ইনিশিয়ালাইজ করতে src/app/app.module.ts ফাইলে Firebase এবং AngularFireModule ইম্পোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire';
import { AngularFireMessagingModule } from '@angular/fire/messaging';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireMessagingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

৪. Push Notification গ্রহণ এবং পাঠানো

৪.১ Push Notification গ্রহণ করা

Firebase Cloud Messaging (FCM) এর মাধ্যমে Push Notification গ্রহণ করতে একটি Notification Service তৈরি করতে হবে:

1. FirebaseMessaging Service তৈরি করা:

ionic generate service services/firebase-messaging

এখন firebase-messaging.service.ts ফাইলে কোড লিখুন:

import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { BehaviorSubject } from 'rxjs';
import { RequestPermission } from '@capacitor/push-notifications';

@Injectable({
  providedIn: 'root'
})
export class FirebaseMessagingService {
  currentMessage = new BehaviorSubject(null);

  constructor(private afMessaging: AngularFireMessaging) {}

  // ফায়ারবেস মেসেজিং সাবস্ক্রাইব করা
  receiveMessage() {
    this.afMessaging.messages.subscribe((message) => {
      console.log('Push notification received:', message);
      this.currentMessage.next(message);
    });
  }

  // Permission রিকোয়েস্ট করা
  requestPermission() {
    this.afMessaging.requestToken.subscribe(
      (token) => {
        console.log('FCM Token:', token);
      },
      (error) => {
        console.error(error);
      }
    );
  }
}

এখানে:

• receiveMessage() ফাংশনটি Push Notification গ্রহণ করার জন্য।
• requestPermission() ফাংশনটি Push Notification গ্রহণ করার জন্য অনুমতি চায় এবং Firebase থেকে Token গ্রহণ করে।

৪.২ Push Notification শো করা

home.page.ts ফাইলে Push Notification শো করার কোড যুক্ত করুন:

import { Component, OnInit } from '@angular/core';
import { FirebaseMessagingService } from '../services/firebase-messaging.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
  constructor(private firebaseMessagingService: FirebaseMessagingService) {}

  ngOnInit() {
    // Push Notification Permission চাওয়া
    this.firebaseMessagingService.requestPermission();
    // Notification গৃহীত হলে তা শো করা
    this.firebaseMessagingService.receiveMessage();
  }
}

এখানে requestPermission() ব্যবহার করে অ্যাপের Permission রিকোয়েস্ট করা হচ্ছে এবং receiveMessage() ব্যবহার করে Push Notification গ্রহণ করা হচ্ছে।

৫. Push Notification পাঠানো

Firebase Console থেকে Push Notification পাঠানোর জন্য:

1. Firebase Console এ যান এবং আপনার প্রজেক্ট নির্বাচন করুন।
2. Cloud Messaging ট্যাবে যান।
3. Send your first message এ ক্লিক করুন।
4. প্রয়োজনীয় তথ্য যেমন শিরোনাম, বার্তা এবং টার্গেট ডিভাইস নির্বাচন করুন।
5. Send message ক্লিক করুন।

আপনি Firebase SDK ব্যবহার করে কাস্টমভাবে Push Notification পাঠাতে পারেন:

import { Injectable } from '@angular/core';
import * as firebase from 'firebase/app';
import 'firebase/messaging';

@Injectable({
  providedIn: 'root'
})
export class PushNotificationService {
  constructor() {
    const messaging = firebase.messaging();
    
    // Firebase মেসেজিং সেটআপ
    messaging.usePublicVapidKey('YOUR_PUBLIC_VAPID_KEY');
    
    messaging.getToken().then((currentToken) => {
      if (currentToken) {
        console.log('FCM Token:', currentToken);
        // FCM Token এর মাধ্যমে Push Notification পাঠানো
      } else {
        console.log('No registration token available');
      }
    }).catch((err) => {
      console.log('An error occurred while retrieving token. ', err);
    });
  }
}

৬. Testing Push Notification

আপনি Firebase Console থেকে Push Notification পাঠিয়ে এটি পরীক্ষা করতে পারেন। মনে রাখবেন, ডিভাইসের FCM Token সঠিকভাবে সংগ্রহ করতে হবে এবং Notification গ্রহণের জন্য ডিভাইসটি অনলাইন থাকতে হবে।

সারাংশ

• Firebase Cloud Messaging (FCM) ব্যবহার করে Ionic অ্যাপে Push Notifications সেটআপ করা যায়।
• Firebase SDK এবং FCM Token ব্যবহার করে Notification পাঠানো এবং গ্রহণ করা হয়।
• AngularFireMessaging মডিউল দিয়ে Ionic অ্যাপে Push Notification এর জন্য সাবস্ক্রিপশন এবং গ্রহণ করা হয়।
• Firebase Console থেকে Push Notification পাঠানো এবং সেটি ডিভাইসে প্রদর্শন করা হয়।

এটি ছিল Ionic অ্যাপে Firebase Cloud Messaging দিয়ে Push Notification সেটআপ করার প্রক্রিয়া।